<template>
  <el-dialog v-model="visible" :title="info.title" width="800px">
    <div class="w-full max-w-full overflow-x-auto h-[700px]">
      <div v-html="info.content"></div>
      <!-- <VuePdfEmbed annotation-layer text-layer source="/agreement/serviceAgreement.pdf" /> -->
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleCloseDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import "vue-pdf-embed/dist/styles/annotationLayer.css";
import "vue-pdf-embed/dist/styles/textLayer.css";
import WxAPI from "@/api/wx";

const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);
const dialog = reactive({
  title: "",
  visible: false,
});
const visible = ref(false);
const props = defineProps({
  keys: {
    type: String,
    default: "agreement",
  },
});
const info = ref({
  title: "",
  content: null,
});
async function handleSubmit() {
  emit("confirm");
  visible.value = false;
  emit("update:modelValue", false); // 关闭弹窗
}
// 关闭弹窗
function handleCloseDialog() {
  visible.value = false;
  emit("cancel");
  emit("update:modelValue", false); // 关闭弹窗
}
function showModal(val) {
  visible.value = true;
}

const getInfo = async (val: string) => {
  try {
    const data = await WxAPI.getAgreement(val);
    info.value.title = data.data.title;
    info.value.content = data.data.content;
  } catch (e) {
    console.log(e);
  } finally {
  }
};
watchEffect(() => {
  getInfo(props.keys);
});
// onMounted(async () => {

//   getInfo();
// });

defineExpose({
  showModal,
});
</script>
<style style="scss" scoped></style>
